<script src="../../../Desktop/server/server.js"></script>
<template>

    <div class="booksView">
      <!-- 返回 -->
        <mt-header fixed title="" class="header" style="height:98px">

            <mt-button @click="goback" icon="back" slot="left" style="margin-top:5px;" >
                <div style="margin-top:-100px;">back</div>
            </mt-button>
                <div style="margin-top:4px;margin-left:20px;font-weight:bold;font-family: '微软雅黑';letter-spacing: 2px;" slot="left"> {{booksTitle}}</div>
                         
       

        </mt-header>
<div class="bc">
         <!-- 头像 -->
        <div class="line"></div>
                 <img :src="booksPic" class="booksPic" style="width:9%;border-radius:80%;">

        <!-- 用户名 -->   
        <div class="bookAuthor" >
            <H3 style=" font-size:120%;color:#000">
            {{booksAuthor}}
            </H3>
<!--关注 收藏-->

         <mt-button size="small" style=" height:32px;width:76px;background-color:white;border-color:#339933;border-width:1px" class="btn1" @click="add()">✚ 关注</mt-button>
          <mt-button size="small" style="height:32px;width:76px;background-color:white;border-color:#339933;border-width:1px" class="btn2" @click="add_1()">★ 收藏</mt-button>
 
        </div>

                   
        <div class="line1"></div> 

        <div class="sort">
            <H1 style="font-weight: normal; font-size:230%;">

            </H1>
            <div class="bookSort">
                <H1 style="font-size:16px;color:">
                {{booksSort}}
                </H1>
            </div>
        </div>

<div class="location">
            <H1 class="bj" style="font-size:90%;">
                编辑于
            </H1>
            <div class="bookLocation">
                <H1 style=" font-size:92%;">
                {{booksLocation}}
                </H1>
            </div>
        </div>

        <div class="inventory">
            <div class="bookInventory">
                <H1 style=" font-size:90%;9">
                {{booksInventory}}
                </H1>
            </div>
        </div>

<!--其他 赞同-->
        <div class="other">
         <div class="line2"></div> 
         <div  class="btn3" @click="gotobooksView()" size="small" style="height:32px;width:160px;">✎ 其他回答（23）</div>
         <div class="line4"></div>
          <div class="btn4" size="small" style="height:32px;width:160px;"  @click="dianzan()">❤ 赞同回答（113）</div>
          <div class="line3" ></div> 
 
        </div>
        </div>
    
  
    </div>
 
</div>

</template>
<script>
     export default {
         name:"booksView",
         data(){
             return{
                username:''
             }
         },

          mounted(){
            this.getUser();
           

        },

         computed:{
             booksPic(){
                 return this.$store.state.books[this.$store.state.books_id].img;
             },
             booksTitle(){
                 return this.$store.state.books[this.$store.state.books_id].title;
             },
             booksAuthor(){
                 return this.$store.state.books[this.$store.state.books_id].author;
             },
              booksSort(){
                 return this.$store.state.books[this.$store.state.books_id].sort;
              },
              booksNumber(){
                 return this.$store.state.books[this.$store.state.books_id].number;
              },
              booksLocation(){
                 return this.$store.state.books[this.$store.state.books_id].location;
              },
              booksInventory(){

                 return this.$store.state.books[this.$store.state.books_id].inventory;
              }
             
         },
         methods:{
             
                  getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid
                        console.log(_this.username);
                       

                    }
                })
               
            },

             add()
             {

//                    this.$store.state.userNameBooks.push(this.$store.state.books[this.$store.state.books_id]);

             },
                add_1(){
            
                      this.$store.state.userNameBooks.push(this.$store.state.books[this.$store.state.books_id]);     
                        
                },
             beforeCreate(){
                  document.body.scrollTop = 0
                  document.documentElement.scrollTop = 0
             },
            goback(){
                this.$store.commit("changeStyle",1);
                this.$router.go(-1);
            },
            gotobooksView(){
                this.$router.push({path:"answerView"});
            },
            gotodianzan(){
                this.$router.push({path:"answerView"});
            },
         }
     }
</script>
<style >

    .booksPic
    {   position: relative;
        border: 1px solid ;
        margin-left:-80%;
        margin-top:27%;
        height:39px;
        width:35%;
        background-color:bisque;

    }

    .bookTitle
    { 
        width: 50%;
        margin-left:50%;
        margin-top:25%;
        padding-top:5px;
        margin-bottom: 20%;
        color: black;
        font-family: '微软雅黑';

        
    }

    .bookAuthor
    {   position: relative;
        width: 50%;
        margin-top:-11%;
        margin-left:17%;
        font-weight: bold;
        font-family: '微软雅黑';
        text-align: left;

       
    }
  

    .line1 {
        border-top: 1px solid #c0c0c0;
        height: 4px;
        margin-top:6%;
        margin-left:-7%;
    }

    .line2 {
        border-top: 1px solid #c0c0c0;
        height: 4px;
        margin-top:22%;
        margin-left:-7%;
    }
    .line3 {
        border-top: 1px solid #c0c0c0;
        height: 4px;
        margin-top:8%;
        margin-left:-7%;
    }
    .line4 {
      position: absolute;
        border-right: 1px solid #c0c0c0;
        height:38px;
        margin-top:-1%;
        margin-left:43%;
    }


    .sort {
        width:85%;
        height:auto;
        position:relative; 
        margin-left:9.5%;
        margin-top:8%;
        text-align:left;

    }

    .number {
        margin-left: -62%;
        margin-top:8%;
    }

    .bookSort {
    
        margin-top:-1%;
        margin-left:-1%;
        letter-spacing:1px;
       
        color: #000;


    }

    .location {
        margin-left: -62%;
        margin-top:8%;

    }

    .bookLocation {
      position: absolute;
        margin-top:-5.4%;
        margin-left:137%;
        color: gray;
    }
    .bj{
        position: absolute;
        margin-top:-0.8%;
        margin-left:127%;
        color: gray;
    }
    .inventory {
        margin-left: -62%;
        margin-top:8%;       
    }

    .bookInventory {
      color: gray;
      text-align: right;
        position: absolute;
        margin-top:-0.8%;
        margin-left:128.7%;
    }

    .btn1 {
        position:absolute;
        margin-top:-15%;
        margin-left:80%;
        margin-right:4%;
        border: 0.3px solid #339933;
        font-size: 15px;
        text-align: center;
        font-weight: normal;
        color: #339933;
    }
    .btn2 {
        position: absolute;
        margin-top:-15%;
        margin-left:120%;
        margin-right:4%;
        border: 0.3px solid #339933;
        font-size: 15px;
        text-align: center;
        color: #339933;
    }
    .btn3{
        position:absolute;
        margin-top:1%;
        margin-left:0%;
        margin-right:4%;
        border:0;
        font-size: 15px;
        text-align: center;
        font-weight: normal;
        color: gray;
    }
    .btn4{
        position:absolute;
        margin-top:1%;
        margin-left:51%;
        margin-right:4%;
        border:0;
        font-size: 15px;
        text-align: center;
        font-weight: normal;
        color: gray;
    }
  .bc{
    background-color: white;
  }
  .other{
    margin-left: 30px;
    bottom:0

  }
  .heng{

        margin-left:-7%;


  }
    
</style>